<template>
  <div class="common-layout theme-white">
    <el-container>
      <el-aside>
        <div class="chat-list">
          <div class="search-box">
            <el-input size="large" v-model="targetName" placeholder="搜索电脑" @keyup="searchChat" autocomplete="on">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Search/>
                </el-icon>
              </template>
            </el-input>
          </div>

          <div class="content" >
            <el-row v-for="chat in computerList" :key="chat.chat_id">
              <div :class="chat.chat_id === activeChat.chat_id?'chat-list-item active':'chat-list-item'" @click="activeChat.value = chat">
                <el-image :src="chat.icon" class="avatar"/>
                <span class="chat-title">{{chat.title}}</span>
                <span class="chat-title">{{chat.address}}</span>
              </div>
            </el-row>
          </div>
        </div>
      </el-aside>
      <el-main>
        <ChatList v-if="activeChat.value!==undefined" :chatData="activeChat"/>
      </el-main>
    </el-container>
  </div>


</template>
<script setup>
import axios from 'axios'
import {nextTick, onMounted, ref} from 'vue'
import ChatList from "@/components/ChatList.vue";
import 'highlight.js/styles/a11y-dark.css'

const allChats = ref([]); // 会话列表
const computerList = ref(allChats.value);
const activeChat = ref({});
const targetName = ref('')

onMounted(() => {
  computerList.value.push(
    {
      title:'本机',
      address:'127.0.0.1',
      has_new:false,
      msg:ref([]),
      icon:'/assets/image/man.png'
    },
    {
      title:'Chales',
      address:'192.168.10.11',
      has_new:false,
      msg:[],
      icon:'/assets/image/woman.png'
    },
    {
      title:'Thomas',
      address:'192.168.10.18',
      has_new:false,
      msg:[],
      icon:'/assets/image/man.png'
    },
    {
      title:'Gill',
      address:'192.168.10.13',
      has_new:false,
      msg:[],
      icon:'/assets/image/woman.png'
    },
    {
      title:'Well',
      address:'192.168.10.15',
      has_new:false,
      msg:[],
      icon:'/assets/image/man.png'
    },
  )
  axios.get("/chat/computer").then(o=>{
    
  }).catch(o=>{
    ElMessage.error("获取成员失败："+o.message)
  })
});

// 搜索
const searchChat = function () {
  if (targetName.value === '') {
    computerList.value = allChats.value
    return
  }
  const items = [];
  for (let i = 0; i < allChats.value.length; i++) {
    if (allChats.value[i].title.toLowerCase().indexOf(targetName.value.toLowerCase()) !== -1) {
      items.push(allChats.value[i]);
    }
  }
  computerList.value = items;
}
</script>

<style scoped lang="stylus">
$sideBgColor = #252526;
$borderColor = #4676d0;
#app {
  .common-layout {
    // left side
    .el-aside {
      height: 100vh;
      background-color: $sideBgColor;
      .chat-list {
        display: flex
        flex-flow: column
        background-color: #28292A
        border-top: 1px solid #2F3032
        border-right: 1px solid #2F3032

        .search-box {
          flex-wrap: wrap
          padding: 10px 15px;
          //background-color #343540

          .el-input__wrapper {
            background-color: #363535;
            box-shadow: none
          }
        }

        // 隐藏滚动条

        ::-webkit-scrollbar {
          width: 0;
          height: 0;
          background-color: transparent;
        }

        .content {
          //display flex
          //flex-wrap: wrap;
          //flex-direction column
          width: 100%
          overflow-y: scroll

          .chat-list-item {
            display: flex
            width: 100%
            justify-content: flex-start
            padding: 8px 12px
            border-bottom: 1px solid #3c3c3c
            cursor: pointer

            &:hover {
              background-color #343540
            }

            .avatar {
              width: 40px;
              height: 40px;
              border-radius: 10%;
            }

            .chat-title-input {
              font-size: 14px;
              margin-top: 4px;
              margin-left: 10px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: 190px;
            }

            .chat-title {
              color: #c1c1c1
              padding: 5px 0px 5px 20px;
              max-width 220px;
              font-size 14px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: flex;
              align-items:center;
            }

            .btn {
              display none
              position: absolute;
              right: 2px;
              top: 16px;
              color #ffffff

              .el-icon {
                margin-right 8px;
              }
            }
          }

          .chat-list-item.active {
            background-color: #343540;
            .btn {
              display inline
            }
          }
        }
      }
    }

    .el-main {
      overflow: hidden;
      --el-main-padding: 0;
      margin: 0;
      background: white;
    }
  }
}
</style>